import React, { Component } from 'react'

class App extends Component {
  clickCapture = () => {
    console.log('合成事件 - 捕获 - btn')
  }
  click = () => {
    console.log('合成事件 - 冒泡 - btn')
  }

  // 挂载完毕 -- 生命周期
  componentDidMount() {
    const btn = document.getElementById('btn')

    btn.addEventListener(
      'click',
      () => {
        console.log('原生事件 - 捕获 - btn')
      },
      true
    )

    btn.addEventListener(
      'click',
      () => {
        console.log('原生事件 - 冒泡 - btn')
      },
      false
    )

    document.body.addEventListener(
      'click',
      () => {
        console.log('原生事件 - 捕获 - body')
      },
      true
    )
    document.body.addEventListener(
      'click',
      () => {
        console.log('原生事件 - 冒泡 - body')
      },
      false
    )

    document.getElementById('root').addEventListener(
      'click',
      () => {
        console.log('原生事件 - 捕获 - root')
      },
      true
    )
    document.getElementById('root').addEventListener(
      'click',
      () => {
        console.log('原生事件 - 冒泡 - root')
      },
      true
    )
  }

  render() {
    return (
      <div>
        <div id="btn" onClickCapture={this.clickCapture} onClick={this.click}>
          点击一下
        </div>
      </div>
    )
  }
}

export default App
